<template>
  <div class="about">
    <div class="handle_container">
       <a-input placeholder="请输入用户名" 
       v-model="username"/>
       <a-button icon="search"
       @click="onClick">
        Search
       </a-button>
       <a-button icon="search"
       @click="onkUnSet">
        重置
       </a-button>
    </div>
    <a-table 
    :row-selection="rowSelection" 
    :columns="columns" 
    :data-source="users" 
    bordered
    :pagination="pagination"/>
  </div>
</template>

<script>
import axios from "axios";
export default {
    data(){
    return{
      users:[],
      dataSource:[],
      username:"",
      columns:[
        {
          title: 'ID',
          dataIndex: 'id',
          key: 'id',
        },
        {
          title:"roleName",
          dataIndex:"role_name",
          key:"role_name"
        },
        {
          title:"userName",
          dataIndex:"username",
          key:"username"
        },
        {
          title:"创建时间",
          dataIndex:"dateStr",
          key:"dateStr"
        },
        {
          title:"手机号码",
          dataIndex:"mobile",
          key:"mobile"
        },
        {
          title:"邮箱",
          dataIndex:"email",
          key:"email"
        }
      ],
      rowSelection:{
       onChange: (selectedRowKeys, selectedRows) => {
        console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
       },
       onSelect: (record, selected, selectedRows) => {
        console.log(record, selected, selectedRows);
       },
       onSelectAll: (selected, selectedRows, changeRows) => {
        console.log(selected, selectedRows, changeRows);
      },
     },
     pagination:{
       defaultPageSize:4,
       total:0
     }
    }
  },
  methods:{
    // rowSelection(){
      
    // }

    onClick(){
      if(this.username.length === 0){
        return;
      }
      
      this.users = [];
      this.dataSource.forEach((element)=>{
        if(element.username === this.username){
          this.users.push(element)
        }
      })
      this.pagination.total = this.users.length;
    },

    onkUnSet(){
      this.users = [...this.dataSource];
      this.pagination.total = this.users.length;
    }
  },
  mounted(){
    axios.get("http://localhost:8080/userlist.json").then((res)=>{
      console.log(res)

      this.users=res.data.data.users
      
      this.users.forEach((element)=>{
        var date = new Date(element.create_time*1000)
        var dateStr = `${date.getFullYear()}年${date.getMonth()+1}月`;
        element.dateStr = dateStr;
      })
      this.dataSource = [...this.users];
      this.pagination.total = this.users.length
      console.log(this.pagination.total)
    }).catch(()=>{

    })
  },
}
</script>

<style scoped>
.handle_container
{
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
</style>